<template>
  <div class="home">
    <nav-bar />
    <div class="banner">
      <img src="@/assets/img/home/banner.webp" alt="" />
    </div>
    <search-city />
    <Categories />
    <Content />
    <!-- <div v-if="isShowSearchBar">213123123123123123</div> -->
  </div>
</template>

<script setup>
import { watch, ref } from 'vue'
import { storeToRefs } from 'pinia'
import NavBar from './cpns/home_navBar.vue'
import SearchCity from './cpns/home-search-city.vue'
import Categories from './cpns/home-categories.vue'
import Content from './cpns/home-content.vue'
import useHomeStore from '@/stores/modeules/home' // pinia数据存储
import useScroll from '@/hooks/useScroll'

//pinia数据拿取
const homeStore = useHomeStore()
const { currentPage } = storeToRefs(homeStore) // 获取存储的页数

// 热门建议接口请求
homeStore.fetchHotSuggests()
homeStore.fetchCategories()
homeStore.fetchHomeHouseList(currentPage)

//调用hooks滚动方法
const { isReatchCallBack, scrollTop } = useScroll()
//监听滚动
watch(isReatchCallBack, newVal => {
  if (newVal)
    homeStore.fetchHomeHouseList().finally(() => {
      isReatchCallBack.value = false
    })
})

// 距离显示搜索信息
const isShowSearchBar = ref(false)
watch(scrollTop, newTop => {
  console.log(newTop)
  if (newTop >= 600) {
    isShowSearchBar.value = true
  } else {
    isShowSearchBar.value = false
  }
})
// watch(scrollTop)
</script>

<style scoped lang="scss">
.home {
  padding-bottom: 60px;
  .banner {
    img {
      width: 100%;
    }
  }
}
</style>
